<template>
  <!-- 近7天，15天，30天 -->
  <div id="radio_group01">
    <div class="radio_wrap">
      <div :class="{'radio_item':true,'radio_item_blue':radio_value==item}"
           v-for="(item,index) in radio_values"
           :key="'radio_group01'+index"
           @click="now_radio_value = item; $emit('returnBack', now_radio_value)">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'radio_group01',
  data() {
    return {
      now_radio_value: this.radio_value,
    }
  },
  model: {
    prop: 'radio_value',
    event: 'returnBack',
  },
  props: ['radio_values', 'radio_value'],
  created: function () {
    this.$watch('radio_value', function (newValue, oldValue) {
      this.now_radio_value = this.radio_value
    })
  },
}
</script>
<style scoped lang="less">
#radio_group01 {
  .radio_item {
    background-color: #f5f5f5;
    border-radius: 4px;
    border: solid 1px #e5e5e5;
    cursor: pointer;
    outline: none;
    width: 1.253333rem;
    height: .613333rem;
    border-radius: 4px;
    font-size: .32rem;
    color: #555;
    text-align: center;
    margin-left: .133rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .radio_item_blue {
    color: #fff !important;
    background-color: #fd7f2c !important;
    border: solid 1px #fd7f2c;
  }
  .radio_item:first-child {
    margin-left: 0;
  }
  .radio_wrap {
    display: flex;
    flex-wrap: wrap;
    // width: 3.48rem;
  }
}
</style>
